<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div class="container" id="app">
        手机号：<input type="text" v-model="userName"/><br/>
        密码：<input type="password" v-model="userPass"/><br/>
        确认密码：<input type="password" v-model="reUserPass"/><br/>
        昵称：<input type="text" v-model="userNickname"/><br/>
        邮箱：<input type="text" v-model="userEmail"/><br/>
        <button v-on:click="register">注册</button>
    </div>
</body>
<script>

    new Vue({
        el:'#app',
        data(){
            return{
                userName:'钟媛媛',
                userPass:'',
                reUserPass:'',
                userNickname:'',
                userEmail:''
            }
        },
        mounted(){

        },
        methods:{
            getData(url,data,callback) {
                var xmlhttp;
                if(window.XMLHttpRequest)
                {
                    xmlhttp=new XMLHttpRequest();

                }else
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                };
                xmlhttp.open("POST",url,true);
                xmlhttp.setRequestHeader("Content-type","application/json");
                xmlhttp.send(JSON.stringify(data));
                xmlhttp.onreadystatechange=function() {
                    callback(xmlhttp.responseText);



                };
            },
            register(){
                console.log('userName:'+this.userName);
                var data={
                    userName:this.userName,
                    userPass:this.userPass,
                    userNickname:this.userNickname,
                    userEmail:this.userEmail
                };
                if(this.userPass==this.reUserPass){
                    this.getData('/register',data,function (res) {
                        console.log(res);
                    })
                }else{
                    alert('与原密码不一致');
                }
            }
        }
    })
</script>
</html>